<template>
  <div class="root" ref="root">
    <div class="nav">
      <span class="logo" @click="leftNav()">XLKBLOG</span>
      <ul class="site">
        <li @click="siteClick(temp.link)" :class="nowSite===temp.link? 'checkedSite':'uncheckedSite'" v-for="temp in sites">{{temp.name}}</li>
      </ul>
      <div class="search" v-show="nowSite==='note'">
        <input class="search-text" type="text" v-model="searchText"/>
        <div class="search-box" @click="searchClick">
          <img class="search-btn" src="../assets/images/search.png" alt="搜索框">
        </div>
      </div>
      <img class="admin_login_img" src="../assets/images/admin_login.png">
    </div>
    <div class="left_nav" ref="left_nav">
      <h2>nav</h2>
      <p>我是左侧侧边栏</p>
    </div>
    <div class="homepage" v-show="nowSite==='home'">
      <div class="image-text">
        <h1>这个一个记录笔记和分享日常的博客</h1>
      </div>
      <div class="bg-image" style="background-image: url('/static/images/home/home1.jpg')"></div>
      <div class="image-head">
        <h1>欢迎来到XLKBLOG</h1>
      </div>
      <div class="image-text">
        <h1>这个一个记录笔记和分享日常的博客</h1>
      </div>

      <div class="bg-image" style="background-image: url('static/images/home/home2.jpg')"></div>
      <div class="image-head">
        <h1>本站有三个模块</h1>
      </div>
      <div class="image-text">
        <h1>笔记、日常、聊天室</h1>
      </div>

      <div class="bg-image" style="background-image: url('static/images/home/home3.jpg')"></div>
      <div class="image-head">
        <h1>技术有限，众多BUG</h1>
      </div>
      <div class="image-text">
        <h1>还望大家海涵</h1>
      </div>

      <div class="bg-image" style="background-image: url('static/images/home/home4.jpg')"></div>
      <div class="image-head">
        <h1>激励自己的一句话</h1>
      </div>
      <div class="image-text">
        <h1>最黑暗的时刻，就是黎明前</h1>
      </div>

    </div>
    <div class="content" @click="closeLeftNav" :style="{minHeight:clientHeight+'px'}">
      <transition name="transitionName">
        <router-view class="router" ref="Note"></router-view>
      </transition>
    </div>
    <footer class="nav-bottom"/>
  </div>
</template>

<script>
  export default{
    name:"Login",
    data() {
      return {
        clientHeight: 0,
        sites: [
          {
            name: '主页',
            link: 'home'
          },
          {
            name: '笔记',
            link: 'note'
          },
          {
            name: '我想说',
            link: 'moments'
          }
          ,
          {
            name: '聊天室',
            link: 'chat'
          }
          ,
          {
            name: '关于本站',
            link: 'about'
          }
        ],
        nowSite: '',
        searchText: ''
      }
    },
    methods: {
      leftNav() {
        this.$refs.left_nav.style.left = 0;
      },
      closeLeftNav() {
        this.$refs.left_nav.style.left = '-230px';
      },
      siteClick(site) {
        this.nowSite = site;
        this.homepage = site === 'home';
        this.$router.push({path: site});
      },
      searchClick(){
        if(this.searchText.replace(/(^s*)|(s*$)/g, "")===""){
          this.$message({
            message: '搜索内容不能为空',
            type: 'warning'
          });
        }else {
          this.$refs['Note'].searchArticle();
        }
      }
    },
    mounted() {
      let path = this.$route.path;
      this.nowSite = path.slice(1,path.length);

      this.clientHeight = window.screen.availHeight
    }
  }
</script>

<style scoped>
  .root{
    position: relative;
    overflow: auto;
    padding-top: 60px;
  }
  h2{
    margin: 0;
  }
  ul{
    margin: 0;
    padding: 0;
  }
  .nav{
    z-index: 99;
    position: fixed;
    left: 0;
    top: 0;
    font-family: serif;
    color: #d2dad2;
    width: 100%;
    height: 60px;
    background-image: -webkit-linear-gradient(top, #2c2b2b, #191818);
    background-image: -moz-linear-gradient(top,  #2c2b2b, #191818);
    background-image: -o-linear-gradient(top,  #2c2b2b, #191818);
    background-image: linear-gradient(to bottom,  #2c2b2b, #191818);
    line-height: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .logo{
    float: left;
    margin-left: 20px;
    font-size: 28px;
    font-family: fantasy;
    cursor: pointer;
    transition: 500ms;
  }
  .logo:hover{
    color: cadetblue;
  }
  @media only screen and (min-width: 736px) {
    .left_nav{
      display: none;
    }
  }
  @media only screen and (max-width: 736px) {
    .site{
      display: none;
    }
    .logo{
      font-size: 15px;
    }
    .left_nav{
      display: block;
      transition: 500ms;
    }
    .search:hover{
      width: 250px;
      border-radius: 20px;
    }
    .search:hover .search-text{
      width: 170px;
    }
  }
  .site{
    text-align: center;
    width: 400px;
    float: left;
  }
  .uncheckedSite{
    display: inline;
    padding: 20px 5px;
    margin-right: 10px;
    transition: 500ms;
  }
  .checkedSite{
    display: inline;
    padding: 20px 5px;
    margin-right: 10px;
    background: #393939;
    transition: 500ms;
  }
  .site li:hover{
    background: #393939;
  }
  .search{
    position: absolute;
    right: 80px;
    width: 80px;
    height: 60px;
    transition: width 2s;
    background: #393939;
  }
  .search-text{
    position: absolute;
    right: 60px;
    line-height: 60px;
    background: none;
    border-radius: 15px;
    height: 58px;
    width: 0;
    font-size: 18px;
    border: none;
    outline: none;
    color: #bfbfbf;
    transition: width 2s;
  }
  .search:hover{
    width: 300px;
    border-radius: 20px;
  }
  .search:hover .search-text{
    width: 220px;
  }
  .search-box{
    display: inline-block;
    float: right;
    width: 40px;
    height: 40px;
    margin-top: 10px;
    margin-right: 20px;
    border-radius: 50px;
  }
  .search-box:active{
    background: #169944 !important;
  }
  .search-btn{
    width: 30px;
    height: 30px;
    margin-left: 6px;
  }
  .admin_login_img{
    float: right;
    margin-top: 10px;
    margin-right: 20px;
    width: 35px;
    height: 35px;
    vertical-align: middle;
  }
  .left_nav{
    position: fixed;
    font-family: serif;
    color: #000000;
    z-index: 999;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    left: -230px;
    width: 230px;
    height: 100%;
    background: #e2e4e7;
    transition: left linear .3s;
  }
  .content{

  }
  .homepage{
    height: 100vh;
    perspective: 3px;
    overflow-x: hidden;
  }
  .homepage::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }
  .homepage div{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    letter-spacing: 2px;
  }
  .bg-image{
    transform: translateZ(-1px) scale(1.5);
    background-size: cover;
    height: 100vh;
    z-index: -1;
  }
  .image-text{
    height: 50vh;
    background-color: white;
  }
  .image-text h1{
    color: black;
  }
  .image-head{
    z-index: -1;
    transform: translateY(-40vh) translateZ(1px);
    color: #f5f7fa;
    font-size: 30px;
  }
  .nav-bottom{
    width: 100%;
    height: 60px;
    background-image: -webkit-linear-gradient(top, #2c2b2b, #191818);
    background-image: -moz-linear-gradient(top,  #2c2b2b, #191818);
    background-image: -o-linear-gradient(top,  #2c2b2b, #191818);
    background-image: linear-gradient(to bottom,  #2c2b2b, #191818);
  }
</style>

